package com.example.contact.view

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.material.contentColorFor
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.example.contact.ContactFeatureSDK
import com.example.contact.R
import com.example.contact.navigation.NavigationController
import com.example.contact.model.Contact
import com.example.contact.navigation.Screen
import com.example.contact.viewmodel.ContactListState
import com.example.featuresdk.model.User
import com.example.featuresdk.theme.DemoTheme
import com.example.featuresdk.view.*

@ExperimentalFoundationApi
@Composable
fun ContactListScreen(uiState: ContactListState, uiConstraints: LayoutConstraints) {

    val contacts by uiState.contacts.collectAsState(initial = emptyMap())

    FullScreen(uiConstraints) {

        AppHeaderView(uiConstraints.appHeaderBarHeightDp){
            FeatureEntryPlaceholder()
            AppHeaderTitle(stringResource(R.string.contact_feature_desc), uiConstraints.headerWidthDp)
            HeaderSearchFeatureEntry()
        }

        AppBodyView(bodyHeightDp = {uiConstraints.appBodyHeightDp.dp}) {
            //https://developer.android.google.cn/jetpack/compose/lists
            LazyColumn(
                modifier = Modifier.fillMaxSize(),
                contentPadding = PaddingValues(horizontal = 0.dp, vertical = 8.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {

                contacts.forEach { (key, contactUsers) ->
                    stickyHeader(key) {
                        Text(
                            text = key, modifier = Modifier
                                .fillMaxWidth()
                                .background(DemoTheme.colors.primary)
                                .padding(2.dp)
                                .height(20.dp),
                            color = contentColorFor(DemoTheme.colors.primary),
                            style = DemoTheme.typography.title
                        )
                    }

                    items(contactUsers.keys.toList(),{contact -> contact.contactId}) { contact ->
                        ContactEntryView(contact, contactUsers[contact]!!, uiConstraints)
                    }
                }
            }
        }

        AppBottomNavigationView(ContactFeatureSDK.FEATURE_KEY)
    }
}

@Composable
fun ContactEntryView(contact: Contact, user: User, uiConstraints: LayoutConstraints) {

    val horizontalPadding = 4
    val spacerWidth = 20
    val arrowWidth = 8
    val iconWidthHeight = 30
    val textWidth = uiConstraints.screenWithDp - horizontalPadding - horizontalPadding - iconWidthHeight - spacerWidth - arrowWidth

    Row(horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.Top,
        modifier = Modifier
            .clickable {
                NavigationController.instance.navigate(Screen.ContactDetail, contact.contactId.toString())
            }){

        Spacer(modifier = Modifier.width(horizontalPadding.dp))

        Image(painter = painterResource(user.icon),
            contentDescription = "",
            modifier = Modifier
                .width(iconWidthHeight.dp)
                .height(iconWidthHeight.dp))

        Spacer(modifier = Modifier.width(spacerWidth.dp))

        Column {
            Row {
                Text(text = contact.name!!,color = contentColorFor(DemoTheme.colors.secondary),
                    modifier = Modifier
                        .width(textWidth.dp)
                        .height(40.dp),
                    overflow = TextOverflow.Clip,
                    style = DemoTheme.typography.title)

                Spacer(modifier = Modifier.width(arrowWidth.dp))
            }

            Divider(modifier = Modifier.width((textWidth + arrowWidth).dp), Color.LightGray)
        }
        Spacer(modifier = Modifier.width(horizontalPadding.dp))
    }
}